<script setup lang='ts'>
import { onMounted, ref, watch } from "vue";
import { menuApi } from "@/api";
import { $t } from "@/plugins/i18n";
import { apiCall } from "@/utils/http/apiCall";

/**
 * el-cascader props 配置
 * Element Plus 的 Cascader 不支持通过 "meta.title" 这种点路径直接取深层属性
 * 因此我们在获取数据后，把 meta.title 翻译后放到扁平的 label 字段。
 */
const cascaderProps = {
    value: "id",
    label: "label", // 使用我们填充好的 label 字段
    checkStrictly: true,
    checkOnClickNode: true,
};

const options = ref<any[]>([]); // 菜单选项
const idList = ref<string[]>([]); // 级联选择的 ID 列表

/** 递归填充 label（国际化） */
function fillI18nLabel(list: any[]) {
    list.forEach((item) => {
        const titleKey = item?.meta?.title;
        // 如果 meta.title 是国际化 key，则用 t 处理；否则直接显示原值
        if (titleKey) {
            item.label = $t(titleKey);
        } else {
            item.label = item.label || ""; // 兜底，防止 ElementPlus 报错
        }
        if (Array.isArray(item.children) && item.children.length) {
            fillI18nLabel(item.children);
        }
    });
}

/** 获取菜单选项 */
const getOptions = async () => {
    await apiCall(
        () => menuApi.listMenuTree(),
        (data) => {
            fillI18nLabel(data);
            options.value = data;
        },
    );
};

// 级联选择的 ID 列表变化时，更新 modelValue
const modelValue = defineModel<string | null>();

watch(
    () => idList.value,
    (newVal) => {
        modelValue.value = newVal.length ? newVal[newVal.length - 1] : null;
    },
);

/** 设置级联选择的 ID 列表, 用于回显 */
const setIdList = () => {
    if (modelValue.value == null) {
        idList.value = [];
        return;
    }
    apiCall(
        () => menuApi.listParentById(modelValue.value!),
        (data) => {
            idList.value = data.ids;
        },
    );
};

onMounted(() => {
    getOptions();
    setIdList();
});
</script>

<template>
    <el-cascader
        v-model="idList"
        :options="options"
        :props="cascaderProps"
        clearable
        :placeholder="$t('placeholder.selectParentMenu')"
    />
</template>
